<script setup lang="ts">
import type { PropType } from 'vue'
/**
 * 通过provide/inject 方式触发爷组件的方法
 * 可触发方法：
 * @input(row,col,type) 编辑修改
 */
import type { IMethods, ITableCol, ITableRow } from '@/types'
import { inject } from 'vue'

defineProps({
  colItem: {
    type: Object as PropType<ITableCol>,
    default() {
      return {}
    },
  },
  row: {
    type: Object as PropType<ITableRow>,
    default: () => ({}),
  },
})

function handleControlType(type: string = '') {
  let handleType = ''
  if (type === 'input' || type === 'textbox')
    handleType = 'input'
  if (type === 'commonBox')
    handleType = 'select'
  return handleType
}
const methods = inject<IMethods>('methods')
// 在 Input 值改变时触发
function input(e: any, row: ITableRow, col: ITableCol, type: string = 'input') {
  if (methods?.input)
    methods.input(row, col, type)
}
// 仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发
function change(e: any, row: ITableRow, col: ITableCol, type: string = 'input') {
  if (methods?.input)
    methods.change(row, col, type)
}
function strToObj(str: string | null | undefined) {
  if (typeof str === 'string')
    return JSON.parse(str)
  else return {}
}
</script>

<template>
  <template v-if="colItem.ControlType">
    <template v-if="handleControlType(colItem.ControlType) === 'input'">
      <!-- 输入框 inputChange和methods2 以前前后约定功能不确定 -->
      <el-input
        :value="row[colItem.prop]" :type="strToObj(colItem.component)?.inputType || 'text'"
        :disabled="row[strToObj(colItem.component)?.disabled || '']" size="small" :rows="1"
        clearable @input="input($event, row, colItem)" @change="change($event, row, colItem)"
      />
    </template>
    <!-- 数字输入额外判断，后端返回component不包含type属性,只有inputType -->
    <template v-else-if="handleControlType(colItem.ControlType) === 'numberbox'">
      <el-input
        :value="row[colItem.prop]" :type="strToObj(colItem.component)?.inputType || 'number'"
        :disabled="row[strToObj(colItem.component)?.disabled || '']" size="small" :rows="1"
        clearable @input="input($event, row, colItem)" @change="change($event, row, colItem)"
      />
    </template>
    <template v-else-if="handleControlType(colItem.ControlType) === 'select'">
      <el-select
        :value="row[colItem.prop]" size="small" :multiple="strToObj(colItem.component)?.multiple"
        :disabled="row[strToObj(colItem.component)?.disabled || '']" filterable clearable
        @change="change($event, row, colItem, 'select')"
      >
        <el-option
          v-for="(optionItem, optionIndex) in row[
            strToObj(colItem.component)?.prop
          ]" :key="optionIndex" :label="optionItem.label" :value="optionItem.value"
        />
      </el-select>
    </template>
    <!-- 日期选择 -->
    <template v-else-if="handleControlType(colItem.ControlType) === 'date'">
      <el-date-picker
        :value="row[colItem.prop]" size="small" :disabled="!!row[strToObj(colItem.component)?.disabled || '']
          || (row[strToObj(colItem.component)?.[colItem.prop] || ''] ? true : false)
        " type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
        style="width: 100%" @change="change($event, row, colItem, 'datePicker')"
      />
    </template>
    <!-- 日期时间选择 -->
    <template v-else-if="handleControlType(colItem.ControlType) === 'datetime'">
      <el-date-picker
        :value="row[colItem.prop]" size="small" type="datetime" editable clearable
        :disabled="row[strToObj(colItem.component)?.disabled || '']" placeholder="选择日期"
        value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
        style="width: 100%" @change="change($event, row, colItem, 'datePicker')"
      />
    </template>
    <!-- 时间选择，目前设置为15分钟间隔 -->
    <template v-else-if="handleControlType(colItem.ControlType) === 'time'">
      <el-time-select
        :value="row[colItem.prop]" size="small" style="width: 100%"
        :disabled="row[strToObj(colItem.component)?.disabled || '']" :picker-options="{
          start: '00:00',
          step: '00:15',
          end: '24:00',
        }" :placeholder="colItem.placeholder ? colItem.placeholder : '请选择'"
      />
    </template>
    <!-- 选择框 -->
    <template v-else-if="handleControlType(colItem.ControlType) === 'checkbox'">
      <el-checkbox :value="row[colItem.prop]" @change="change($event, row, colItem, 'checkbox')" />
    </template>
    <!-- 开关  -->
    <template v-else-if="handleControlType(colItem.ControlType) === 'switch'">
      <el-switch
        :value="row[colItem.prop]" :active-color="strToObj(colItem.component)?.activeColor"
        :inactive-color="strToObj(colItem.component)?.inactiveColor" :active-value="strToObj(colItem.component)?.activeValue"
        :inactive-value="strToObj(colItem.component)?.inactiveValue"
        @change="change($event, row, colItem, 'switch')"
      />
    </template>
    <!-- 标签显示数据 -->
    <template v-else-if="handleControlType(colItem.ControlType) === 'tag'">
      <el-tag class="table_tag">
        {{ row[colItem.prop] }}
      </el-tag>
    </template>
    <template v-else-if="colItem.component === 'ColorPicker'">
      <el-color-picker
        :value="row[colItem.prop]" size="small"
        @change="change($event, row, colItem, 'colorPicker')"
      />
    </template>
  </template>
  <template v-else>
    <span class="tooltip">{{ row[colItem.prop] }}</span>
  </template>
</template>

<style lang="scss">
.tooltip {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    line-height: 100%;
}
</style>
